<template>
  <section id="uploadList">
    <el-row style="padding-bottom: 10px">
      <el-col :span="6" class='flex' style="justify-content: space-around;align-items: center">
        <el-button size="small" type="primary" @click="goBack">返回</el-button>
        <el-upload size="small" class="upload-demo" action="/ddj/aliCode2/upload"
                   :on-error="uploadError" :show-file-list="false" multiple :on-success="uploadSuccess">
          <el-button type="primary" size="small">上传二维码</el-button>

        </el-upload>
        <el-button type="primary" size="small" @click="changeStatus()">添加</el-button>
      </el-col>

      <el-col :span="18" class="flex">
        <div class="nav_title">
          开始金额
        </div>
        <el-input style="width:70px" size="small" v-model="form2.beginMoney"></el-input>
        <div class="nav_title">
          结束金额
        </div>
        <el-input style="width: 70px" size="small" v-model="form2.endMoney"></el-input>
        <div class="nav_title">
          间隔
        </div>
        <el-input style="width: 70px" size="small" v-model="form2.interval"></el-input>

        <div class="nav_title">
          偏移
        </div>
        <el-input style="width: 70px" size="small" v-model="form2.offSet"></el-input>
        <div class="nav_title">
          小数点
        </div>
        <el-input style="width: 80px" size="small" v-model="form2.point"></el-input>
        <el-button type="primary" style="margin-left: 8px" size="small" @click="querenCode">校验二维码</el-button>
        <el-dialog title="校验列表" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">
                {{scope.row}}
              </template>
            </el-table-column>

          </el-table>
        </el-dialog>

      </el-col>
    </el-row>
    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column label="商户名" width="150">
        <template slot-scope="scope">
          <div v-text="name"></div>
        </template>
      </el-table-column>
      <el-table-column prop="qrCode" label="二维码地址">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope='scope'>
          <div style="white-space: nowrap">
            <el-button type="primary" size="small" @click="changeStatus(scope.row)">修改</el-button>
            <el-button type="primary" size="small" @click="deleteErcode(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="保存二维码" size="small" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="二维码" :label-width="formLabelWidth">
          <el-input v-model="form.qrCode" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="form.amount" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="reviseErcode">确 定</el-button>
      </div>
    </el-dialog>

    <div class="block" style="text-align: right;padding: 10px 20px;">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="page.pageNumber"
                     :page-size="page.pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [],
        total: 1,
        loading: false,
        page: {
          pageSize: 10,
          pageNumber: 1
        },
        form: {
          remark: undefined,
          qrCode: undefined,
          status: undefined,
          amount: undefined,
          id: undefined,
          businessId: undefined
        },
        form2: {
          beginMoney: undefined,
          endMoney: undefined,
          interval: undefined,
          offSet: undefined,
          point: undefined
        },
        dialogFormVisible: false,
        formLabelWidth: '60px',
        name: undefined,
        dialogTableVisible: false,
        gridData: []
      }
    },
    created () {
      this.getBusinessGroup()
      this.name = this.$route.query.name
      this.form.businessId = this.$route.query.id
    },
    methods: {
      getBusinessGroup () {
        this.loading = true
        this.$api.getUploadList2(this.$route.query.id, this.page).then(res => {
          if (res.code === '000000') {
            this.$message.success('获取二维码列表成功')
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.totalRow
          }
        })
      },
      uploadSuccess () {
        this.$message.success('上传成功')
        this.getBusinessGroup()
      },
      uploadError (err, file, fileList) {
        this.$notify.error({
          title: '错误',
          message: '名称为' + file.name + '的图片上传失败',
          duration: 5000
        })
        console.log(err)
      },
      querenCode () {
        this.$api.getVerifyCode2(this.$route.query.id, this.form2).then(res => {
          if (res.code === '000000') {
            this.$message.success('校验二维码成功')
            this.dialogTableVisible = true
            this.gridData = res.data
          }
        })
      },
      changeStatus (row) {
        this.dialogFormVisible = true
        if (row) {
          this.form.remark = row.remark
          this.form.qrCode = row.qrCode
          this.form.amount = row.amount
          this.form.id = row.id
        } else {
          this.form.remark = undefined
          this.form.qrCode = undefined
          this.form.amount = undefined
          this.form.id = undefined
        }
      },
      reviseErcode () {
        this.$api.reviseBusiness2(this.form).then(res => {
          if (res.code === '000000') {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            this.getBusinessGroup()
          }
        })
      },
      deleteErcode (id) {
        this.$confirm('您确定要删除该二维码吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteErcode2(id).then(res => {
            if (res.code === '000000') {
              this.$message.success('删除成功')
              this.getBusinessGroup()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      handleCurrentChange (val) {
        this.page.pageNumber = val
        this.getBusinessGroup()
      }
    }
  }
</script>

<style lang="less">
  #uploadList {
    padding: 10px;
    th {
      text-align: center;
    }
    .title1 {
      font-size: 14px;
    }
    .el-dialog {
      width: 400px !important;
    }
    .nav_title {
      font-size: 14px;
      padding: 5px;
    }
  }
</style>
